/* 全屏容器样式覆盖 */
.container-fluid {
  width: 100%;
  max-width: var(--viewport-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  box-sizing: border-box;
}

/* 全屏宽度效果 - 使用可视宽度而不是100vw */
.full-width {
  width: var(--viewport-width);
  max-width: var(--viewport-width);
  margin-left: calc(-50vw + 50% + var(--scrollbar-width) / 2);
  margin-right: calc(-50vw + 50% + var(--scrollbar-width) / 2);
  box-sizing: border-box;
}

/* 全屏但带内边距的内容容器 */
.content-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .content-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {
  .content-container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
